<template>
  <div class="app-container">
    <el-form :model="searchInfo" ref="queryForm" :inline="true">
      <el-row>
        <el-col>
          <el-form-item label="模版名称">
            <el-input
              v-model="searchInfo.temp_name"
              placeholder="请输入模版名称"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="Search"
              size="small"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" size="small" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- v-hasPermi="['api:mpManage:addTemp']" -->
    <el-button
      type="primary"
      size="small"
      @click="add"
      icon="plus"
      v-hasPermi="['member:mpTemp:add']"
      >添加模版</el-button
    >
    <h3></h3>
    <x-table
      :isLoading="tableLoading"
      :tableData="info.items"
      :propList="propList"
    >
      <!-- v-hasPermi="['api:mpManage:changeTemp']" -->
      <template #op="scope">
        <el-button
          type="primary"
          link
          icon="Edit"
          @click="edit(scope.row)"
          v-hasPermi="['member:mpTemp:change']"
          >编辑</el-button
        >
        <!--  v-hasPermi="['api:mpManage:delTemp']" -->
        <el-button
          type="primary"
          link
          icon="Delete"
          @click="del(scope.row)"
          v-hasPermi="['member:mpTemp:del']"
          >删除</el-button
        >
      </template>
    </x-table>
    <pagination
      v-show="info.total > 0"
      :total="info.total"
      v-model:page="searchInfo.pageNum"
      v-model:limit="searchInfo.pageSize"
      @pagination="getInfo"
    />
  </div>
</template>

<script>
import { getList, del } from "@/api/mpManage/mpTemp";
export default {
  name: "mpmpTempindex",
  data() {
    return {
      propList: [
        {
          label: "模版名称",
          prop: "temp_name",
        },
        {
          label: "模版标题",
          prop: "temp_title",
        },
        {
          label: "模版id",
          prop: "temp_id",
        },
        {
          label: "appid",
          prop: "appid",
        },
        {
          label: "链接",
          prop: "url",
        },
        {
          label: "创建时间",
          prop: "created_at",
        },
        {
          label: "操作",
          slotName: "op",
        },
      ],
      info: {},
      tableLoading: true,
      searchInfo: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getInfo();
    },
    async getInfo() {
      const params = { ...this.searchInfo };
      this.tableLoading = true;
      const { data } = await getList(params);
      this.tableLoading = false;
      this.info = data;
    },
    del(item) {
      console.log(item);
      this.$modal
        .confirm("是否确认删除吗？")
        .then(function () {
          return del(item.id);
        })
        .then(() => {
          this.getInfo();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    edit(item) {
      console.log(item);
      this.$router.push({ path: "/mp/mpTempAdd", query: { id: item.id } });
      //   this.$router.push({ path: "/mp/mpTempAdd?id=" + item.id });
    },
    add() {
      this.$router.push({ path: "/mp/mpTempAdd" });
    },
    resetQuery() {
      this.searchInfo = this.$options.data().searchInfo;
      this.getInfo();
    },
    handleQuery() {
      this.searchInfo.pageNum = 1;
      this.getInfo();
    },
  },
};
</script>

<style lang="scss" scoped></style>
